<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Meatball</title>
	<!-- ICON -->
	<link href="/frame/images/meatball.ico" type="image/ico" rel="shortcut icon">
	<!-- CSS -->
	<link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/lib/layuiadmin/css/admin.css" media="all" />

</head>
<body layadmin-themealias="default">
<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-body">
			<div class="layui-row">
				<div class="layui-col-md2">
					<!--<form class="layui-form" style="float: left;">-->
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-warm" lay-submit lay-filter="addBtn" title="新增">
                            <i class="layui-icon">&#xe61f;</i> 新增
                        </button>
                    </div>
<!--                    <div class="layui-inline">-->
<!--                        <button class="layui-btn layui-btn-warm" lay-submit lay-filter="enableJobBtn" title="开启任务">-->
<!--                            <i class="layui-icon">&#xe61f;</i>开启任务-->
<!--                        </button>-->
<!--                    </div>-->
					<!--</form>-->
				</div>
				<div class="layui-col-md10">
					<form class="layui-form" id="queryForm" style="float: right;">
                        <div class="layui-input-inline">
                            <select name="taskstatus" title="任务状态">
                                <option value="-1">请选择</option>
                                <option value="0">禁用</option>
                                <option value="1">启用</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="triggerstatus" title="触发状态">
                                <option value="-1">请选择</option>
                                <option value="0">停止</option>
                                <option value="1">运行</option>
                            </select>
                        </div>
						<div class="layui-inline">
							<input type="text" name="taskdesc" title="任务描述" placeholder="请输入任务描述" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline">
							<input type="text" name="taskclass" title="任务类名" placeholder="请输入任务类名" autocomplete="off" class="layui-input">
						</div>
                        <div class="layui-inline">
                            <input type="text" name="taskjarfile" title="任务类包名" placeholder="请输入任务类包名" autocomplete="off" class="layui-input">
                        </div>

						<button class="layui-btn" lay-submit lay-filter="query">
							<i class="layui-icon">&#xe615;</i> 查询
						</button>
						<!--<button class="layui-btn" lay-submit lay-filter="crontimebtn2">-->
							<!--<i class="layui-icon">&#xe615;</i> cron-->
						<!--</button>-->
					</form>
				</div>
			</div>
			<hr class="layui-bg-gray">
			<div class="layui-row">
				<div class="layui-col-md12">
					<!-- 表格 -->
					<table id="table" lay-filter="table"></table>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 操作 -->
<script type="text/html" id="operationBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 状态操作 -->
<script type="text/html" id="taskstatus">
	<input type="checkbox" id="{{d.id}}" name="taskstatus" value="{{d.taskstatus}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="switchSysTaskStatus" {{ d.taskstatus == 1 ? 'checked' : '' }}>
</script>
<!-- 状态操作 -->
<script type="text/html" id="triggerstatus">
	<input type="checkbox" id="{{d.id}}" name="triggerstatus" value="{{d.triggerstatus}}" lay-skin="switch" lay-text="正常|停止" lay-filter="switchTriggerStatus" {{ d.triggerstatus == 1 ? 'checked' : '' }}>
</script>
<!-- 状态操作 -->
<!--<script type="text/html" id="triggertype">-->
<!--	<input type="checkbox" id="{{d.id}}" name="triggertype" value="{{d.triggertype}}" lay-skin="switch" lay-text="Cron|Simple" lay-filter="switchTriggerType" {{ d.triggertype == 1 ? 'checked' : '' }}>-->
<!--</script>-->

<!-- 新增 -->
<script type="text/html" id="addForm">
<form class="layui-form layui-form-pane">
	<div class="layui-card">
		<div class="layui-card-body">
			<div class="layui-row">

                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">jar文件</label>
                        <div class="layui-input-block">
                            <input type="text" name="taskjarfile" autocomplete="off" placeholder="jar包文件路径" class="layui-input" readonly="readonly" style="width:455px;float: left">
                            <button type="button" class="layui-btn" id="uploadbtn" style="float: left;text-align: center;width: 90px">
                                <i class="layui-icon">&#xe67c;</i>上传
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="taskdesc" autocomplete="off" placeholder="请设置任务描述" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="taskclass" autocomplete="off" placeholder="请输入任务类名称" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务参数</label>
                        <div class="layui-input-block">
                            <input type="text" name="taskparam" autocomplete="off" placeholder="请输入任务参数" class="layui-input">
                        </div>
                    </div>
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">触发类型</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="checkbox" name="triggertype" lay-skin="switch" lay-text="cron|simple">-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">触发时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="triggertime" id="crontime" autocomplete="off" placeholder="请输入触发时间" class="layui-input" lay-verify="required" style="width:400px;float: left">
                            <button type="button" class="layui-btn" id="crontimebtn" style="float: left;text-align: center;width: 140px">
                                <i class="layui-icon">&#xe6b2;</i>cront表达式
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="taskstatus" lay-skin="switch" lay-text="启用|禁用">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">触发状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="triggerstatus" lay-skin="switch" lay-text="运行|停止">
                        </div>
                    </div>
				</div>
				<div class="hidden-attribute">
					<button class="layui-btn submit" lay-submit="" lay-filter="add">新增</button>
					<button class="layui-btn reset" type="reset">重置</button>
				</div>
			</div>
			<!--<input class="hidden-attribute" name="avatar">-->
		</div>
	</div>
</form>
</script>

<!-- 详情 -->
<script type="text/html" id="view">
<table class="layui-table" style="width: 680px; margin: 10px 10px 0px 10px;">
	<tr>
		<td class="table-td-title">任务描述</td>
		<td width="465">{{d.taskdesc}}</td>
	</tr>
	<tr>
		<td class="table-td-title">任务类名称</td>
		<td width="465">{{d.taskclass}}</td>
	</tr>
	<tr>
		<td class="table-td-title">任务参数</td>
		<td width="465">{{d.taskparam}}</td>
	</tr>
	<tr>
		<td class="table-td-title">jar包路径</td>
		<td width="465">{{d.taskjarfile}}</td>
	</tr>
<!--    <tr>-->
<!--        <td class="table-td-title">触发类型</td>-->
<!--        <td width="465">{{d.triggertime}}</td>-->
<!--    </tr>-->
    <tr>
        <td class="table-td-title">触发时间</td>
        <td width="465">{{d.triggertime}}</td>
    </tr>
    <tr>
        <td class="table-td-title">任务状态</td>
        <td width="465">{{d.taskstatus}}</td>
    </tr>
    <tr>
        <td class="table-td-title">触发状态</td>
        <td width="465">{{d.triggerstatus}}</td>
    </tr>
    <tr>
        <td class="table-td-title">录入时间</td>
        <td width="465">{{d.insertime}}</td>
    </tr>
    <tr>
        <td class="table-td-title">修改时间</td>
        <td width="465">{{d.updatetime}}</td>
    </tr>
    <tr>
        <td class="table-td-title">录入账号</td>
        <td width="465">{{d.userid}}</td>
    </tr>
</table>

<br>
</script>

<!-- 编辑 -->
<script type="text/html" id="editForm">
<form class="layui-form layui-form-pane">
	<div class="layui-card">
		<div class="layui-card-body">
			<div class="layui-row">

				<div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="taskdesc" autocomplete="off" placeholder="请设置任务描述" class="layui-input" lay-verify="required" value="{{d.taskdesc}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="taskclass" autocomplete="off" placeholder="请输入任务类名称" class="layui-input" lay-verify="required" value="{{d.taskclass}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务参数</label>
                        <div class="layui-input-block">
                            <input type="text" name="taskparam" autocomplete="off" placeholder="请输入任务参数" class="layui-input" value="{{d.taskparam}}">
                        </div>
                    </div>
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">触发类型</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="checkbox" name="triggertype" lay-skin="switch" lay-text="cron|simple" {{ d.triggertype == 1 ? 'checked' : '' }}>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">触发时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="triggertime" id="crontime" autocomplete="off" placeholder="请输入触发时间" class="layui-input" lay-verify="required" style="width:400px;float: left" value="{{d.triggertime}}">
                            <button type="button" class="layui-btn" id="crontimebtn" style="float: left;text-align: center;width: 140px">
                                <i class="layui-icon">&#xe6b2;</i>cront表达式
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="taskstatus" lay-skin="switch" lay-text="启用|禁用" {{ d.taskstatus == 1 ? 'checked' : '' }}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">触发状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="triggerstatus" lay-skin="switch" lay-text="运行|停止" {{ d.triggerstatus == 1 ? 'checked' : '' }}>
                        </div>
                    </div>

				</div>
				<div class="hidden-attribute">
					<button class="layui-btn submit" lay-submit="" lay-filter="update">新增</button>
					<button class="layui-btn reset" type="reset">重置</button>
				</div>
			</div>
			<input class="hidden-attribute" name="id" value="{{d.id}}" title="ID">
		</div>
	</div>
</form>
</script>

<!-- JavaScript -->
<script type="text/javascript" src="/lib/layuiadmin/layui/layui.js"></script>

<script type="text/javascript" th:inline="none">
layui.config({
	base: '/lib/layuiadmin/' //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['index', 'upload'], function() {
	var table = layui.table,
		form = layui.form,
		laydate = layui.laydate,
		upload = layui.upload,
		element = layui.element,
		laytpl = layui.laytpl,
		$ = layui.jquery,
		// $addBtn = $('#addBtn'),
		$queryForm = $('#queryForm'),
		layerIndex = 1;

	// 绘制表格
	table.render({
// 		id: 'table',
		elem: '#table',
		url: '/system/task/table',
		page: true, // 开始分页
		// cellMinWidth: 80, // 定义全局最小宽度
		request: {
			pageName: 'offset'
		},
		response: {
            statusCode: 10000
          // countName: 'total', //数据总数的字段名称，默认：count
          // dataName: 'list' //数据列表的字段名称，默认：data
		},
		cols: [[
			{type: 'numbers', title: '序号',fixed: 'left'},
			// {field:'userid', title: '录入账号', sort: true},
			{field:'taskdesc', title: '任务描述',width:200,fixed: 'left', sort: true},
			{field:'taskclass', title: '任务类名称', width:400},
			// {field:'taskparam', title: '任务参数'},
			// {field:'taskjarfile', title: 'jar包路径'},
			{field:'taskstatus', title: '任务状态', align:'center', templet: '#taskstatus',width:90},
			{field:'triggertime', title: '触发时间',width:230},
			{field:'triggerstatus', title: '触发状态', align:'center', templet: '#triggerstatus',width:90},
			// {field:'triggertype', title: '触发类型', align:'center', templet: '#triggertype',width:100},
			// {field:'insertime', title: '创建时间', align:'center',width:170},
			{field:'updatetime', title: '修改时间', align:'center',width:170},
            {field:'userid', title: '录入账号', align:'center', width:110},
			{fixed: 'right', align:'center', width: 180, toolbar: '#operationBar'}
		]]
	});
	//监听工具条
	table.on('tool(table)', function(obj) {
		var data = obj.data,
			$this = $(this),
			getView = view.innerHTML,
			getEdit = editForm.innerHTML;
		if(obj.event === 'detail') {
			$.get('/system/task/' + data.id, function(res) {
				if(res.code == 403) {
					layer.msg(res.message, {icon: 4});
				} else {
					laytpl(getView).render(res, function(html) {
						popupWin($this.text(), html, false);
					})
				}
			})
		} else if(obj.event === 'del') {
			layer.confirm('真的删除行么', {icon: 3}, function(index) {
				operate('DELETE', {'id': data.id}, false, obj);
				layer.close(index);
			});
		} else if(obj.event === 'edit') {
			$.get('/system/task/' + data.id, function(res) {
				if(res.status == 403) {
					layer.msg(res.message, {icon: 4});
				} else {
                    res.taskparam = res.taskparam.replace(/\"/g, "'");
					laytpl(getEdit).render(res, function(html) {
						popupWin($this.text(), html, true);
					});
					rendering();
				}
			})
		}
	});

	// 监听状态改变
	form.on('switch(switchSysTaskStatus)', function(obj) {
		operate('PUT', {'id': this.id, 'taskstatus': obj.elem.checked}, true);
	});
	form.on('switch(switchTriggerStatus)', function(obj) {
		operate('PUT', {'id': this.id, 'triggerstatus': obj.elem.checked}, true);
	});
	// form.on('switch(switchTriggerType)', function(obj) {
	// 	operate('PUT', {'id': this.id, 'triggertype': obj.elem.checked}, true);
	// });

	// 搜索条件提示
	$queryForm.find('input').on('mouseover', function() {
		if(typeof($(this).attr('title')) == 'undefined') return;
		layer.tips($(this).attr('title'), this, {tips: 1});
	});

	// 新增
	form.on('submit(addBtn)', function(data) {
		var $this = $(this);
		laytpl(addForm.innerHTML).render(data, function(html) {
			popupWin($this.attr('title'), html, true);
		});
		rendering();
		return false;
	});
	// // 开启任务
	// form.on('submit(enableJobBtn)', function(data) {
    //
    //     var url = '/system/task/enableJob';
    //     $.ajax({
    //         url: url,
    //         type: 'POST',
    //         async: true,
    //         data: '',
    //         success: function(res) {
    //             if(res.code == 10000) {
    //                 layer.msg(res.message, {icon: 1});
    //             }  else if(res.code == 403) {
    //                 layer.msg(res.message, {icon: 4});
    //             } else {
    //                 layer.msg(res.message, {icon: 5});
    //             }
    //         }
    //     })
    //
	// });

	// 新增
	form.on('submit(add)', function(data) {
		var $form = $(this).parents('form');
		operate('POST', data.field, true);
		return false;
	});

	// 更新
	form.on('submit(update)', function(data) {
		var $form = $(this).parents('form');
		var roles = [];
		$form.find('input[name=roles]:checked').each(function() {
			roles.push($(this).val());
		});
		data.field.roles = roles;
		operate('PUT', data.field, true);
		return false;
	});

	// 查询
	form.on('submit(query)', function(data) {
		table.reload('table', {
			where: data.field
		});
		return false;
	});

	// 操作
	// ajaxType 请求类型
	// data 参数
	// refresh 是否刷新
	// 删除操作时传入的当前行对象
	function operate(ajaxType, data, refresh, delRow) {
		var url = '/system/task/';
		if(ajaxType == 'DELETE') {
			url = '/system/task/' + data.id;
		}
		$.ajax({
			url: url,
		    type: ajaxType,
		    async: true,
		    data: data,
		    success: function(res) {
		    	if(res.code == 10000) {
					layer.close(layerIndex);
					if(refresh) {
		    			table.reload('table');
					} else if(ajaxType == 'DELETE') {
						delRow.del();
					}
		    		if(data.resetPwd) {
		    			layer.alert(res.message, {icon: 6});
		    		} else {
						layer.msg(res.message, {icon: 1});
		    		}
		    	}  else if(res.code == 403) {
		    		layer.msg(res.message, {icon: 4});
		    	} else {
		    		layer.msg(res.message, {icon: 5});
		    	}
		    }
		})
	}

	function popupCrontEditWin() {
        layer.open({
            type: 2,
            area: ['1200px', '760px'],
            maxmin: true,
            resize: true,
            // content: '/lib/crontedit/cronedit.html',
            content: '/lib/cronb/cron.htm',
            success: function(layero, index){
                // console.log(layero);
                var body = layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                // console.log(iframeWin);//得到iframe页的body内容
                // console.log(body.html());//得到iframe页的body内容
                // body.find('input').val($('#crontime').val());
                body.find('#cron').val($('#crontime').val());
                iframeWin.reverseExp();

            }
            ,btn: ['确定', '关闭']
            // ,btn: ['按钮一', '按钮二', '按钮三']
            ,yes: function(index, layero){
                var body = layer.getChildFrame('body', index);
                $('#crontime').val(body.find('#cron').val());
                layer.close(index);
            }
            ,btn2: function(index, layero){
                // alert("btn2");
                //return false 开启该代码可禁止点击该按钮关闭
            }
            // ,btn3: function(index, layero){
            //     //按钮【按钮三】的回调
            //     alert("btn3");
            //     //return false 开启该代码可禁止点击该按钮关闭
            // }
            ,cancel: function(){
                //右上角关闭回调
                // alert("cancel");
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });

    }

	//渲染弹框
	function popupWin(title, content, showBtn) {
		layerIndex = layer.open({
			id: 'meatball',
			type: 1, //Page层类型
			area: '700px', //['700px', '480'],
			maxWidth: 1000,
			maxHeight: 800,
			title: title,
            skin: 'layui-layer-rim', //加上边框
			shade: 0.1, //遮罩透明度
			// maxmin: true, //允许全屏最小化
			anim: 0, //0-6的动画形式，-1不开启
			scrollbar: false, //禁用滚动
			content: content,
			btn: showBtn ? ['<i class="layui-icon layui-icon-ok"></i> 提交', '<i class="layui-icon layui-icon-refresh-1"></i> 重置'] : '',
			yes: function(index, layero) {
				layero.find('form .submit').trigger('click');
				return false;
			},
			btn2: function(index, layero) {
				layero.find('form .reset').trigger('click');
				return false;
			}
		});
        // layer.full(layerIndex);
	}

	// 动态渲染控件
	function rendering() {
		var $form = $('form');
		// 渲染select
		form.render('select');
		// 重新渲染多选框
		form.render('checkbox');
		// // 初始化日期
		// laydate.render({
		// 	elem: '.birthday'
		// });


        $("#crontimebtn").click(function(event){
            event.stopPropagation();
            popupCrontEditWin();
        });


        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadbtn' //绑定元素
            ,url: '/system/task/uploadjar' //上传接口
            ,accept: 'file'
            ,acceptMime: 'file/jar'
            ,exts: 'jar'
            ,field: 'file'
            ,done: function(res){
                //上传完毕回调
                // console.log(res);
                if(res.code=='10000'){
                    layer.msg(res.message, {icon: 1});
                    var url = res.data.taskjarfile;
                    $form.find('input[name=taskjarfile]').val(url);

                }
            }
            ,error: function(res){
                layer.msg('上传失败！', {icon: 2});
            }
        });

	}
});
</script>
</body>
</html>